<script setup>
import request from '@/utils/request';
import { getFromLocalStorage } from '@/utils/store-data';
import { onMounted } from 'vue';
import {ref} from 'vue'

const currentUser = getFromLocalStorage("current-user")
const username    = ref(currentUser.username || "")
const activeName = ref('0')

// notice
const noticeList = ref([])
const getNotice = () => request({ url: '/notice/selectOpenNotice' }).then((res) => noticeList.value = res.data)

onMounted(() => getNotice())
</script>

<template>
  <div>
    <div style="box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px">
      早安, {{ username }} 祝你开心每一天！
    </div>

    <div style="display: flex">
      <el-card style="width: 100%;">
        <div slot="header" class="clearfix">
          <span>青哥哥带你做毕设2024</span>
        </div>
        <div>
          2024毕设正式开始了！青哥哥带你手把手敲出来！
          <div style="margin-top: 20px">
            <div style="margin: 10px 0"><strong>主题色</strong></div>
            <el-button type="primary">按钮</el-button>
            <el-button type="success">按钮</el-button>
            <el-button type="warning">按钮</el-button>
            <el-button type="danger">按钮</el-button>
            <el-button type="info">按钮</el-button>
          </div>
        </div>
      </el-card>
    </div>

    <div style="display: flex; margin: 15px 0">
      <el-card style="width: 50%; margin-right: 10px">
        <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
        <el-timeline style="max-width: 600px;padding: 0;">
          <el-timeline-item :timestamp="item.time" placement="top" v-for="item in noticeList" :key="item.id">
            <el-card>
              <h4>{{ item.title}}</h4>
              <div v-html="item.content"></div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>

      <el-card style="width: 50%">
        <div style="margin-bottom: 15px; font-size: 20px; font-weight: bold">系统公告</div>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item :title="item.title" :name="index+''" v-for="(item,index) in noticeList" :key="item.id">
            <div> {{ item.time }} </div>
            <div>{{ item.content }}</div>
          </el-collapse-item>
        </el-collapse>
      </el-card>
    </div>

  </div>
</template>
